<template>
    <div class="content">
      <div class="cont1">筛选条件</div>
        <!-- <div>表单搜索条件</div> -->
        <div class="select">
         <el-form :inline="true" :model="data.form" class="demo-form-inline">
        <el-form-item label="姓名或手机号：">
          <el-input v-model="data.form.value" placeholder="用户姓名/手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="select">查询</el-button>
        </el-form-item>
      </el-form>
      </div>
        <!-- 会员信息表格 -->
        <div class="person">
             <el-table :data="nowData" style="width: 100%" :header-cell-style="{background:'#438ACA',color:'#ffffff',textAlign:'center'}" :cell-style="{textAlign:'center'}">
                <el-table-column prop="id" label="用户id" width="80" />
                <el-table-column prop="userName" label="姓名" width="80"/>
                <el-table-column prop="phone" label="手机号" width="180" />
                <el-table-column prop="jiFen" label="积分" width="80" />
                <el-table-column prop="grade" label="等级" width="100"/>
                <el-table-column prop="daoFcs" label="到访次数"/>
                <el-table-column prop="time" label="最近使用时间" width="180" :formatter="dateFormat"/>
                <el-table-column prop="state" label="状态" width="80">
        <template v-slot="scope">
           <el-button v-if="scope.row.state==0" 
           style="background:green;color:white"
           size="small"
           @click="actionUpdate(scope.row)"
           >启用</el-button>
           <el-button v-if="scope.row.state==1" 
           style="background:grey;color:white"
           size="small"
           @click="actionUpdate(scope.row)"
           >禁用</el-button>
          </template>
                </el-table-column>
                <el-table-column  label="操作" width="190">
                <template v-slot="scope">
                    <el-button @click="update(scope.row)">编辑</el-button>
                    <el-button @click="AddJifen(scope.row)" >积分充值</el-button>
                </template>
                </el-table-column>
            </el-table>
             <div class="page">
                <div class="pageSpan">
                    共 <span> {{ maxpage }} </span> 页/   <span> {{ data.tableData.length }}</span> 条数据
                </div>
               <el-pagination layout="prev, pager, next" :total="1000" 
                @current-change="page"
                :current-page="data.nowpage"
                :page-count="maxpage" />
                <div class="pageSpan">跳至第 <input class="pageInput" type="text" v-model="data.pageNum" @keyup.enter="page(data.pageNum)" style="text-align:center"> 页
                </div>
            </div>
        </div>
    </div>
<!-- 编辑会员信息 -->
<el-dialog v-model="data.dialogFormVisible" title="会员信息">
    <el-form :model="data.form1">
      <el-form-item label="会员ID" :label-width="formLabelWidth">
        <el-input v-model="data.form1.id" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="所属分组" :label-width="formLabelWidth">
        <el-select v-model="data.form1.fenZu" placeholder="选择分组">
          <el-option label="A类用户" value="A类用户" />
          <el-option label="B类用户" value="B类用户" />
          <el-option label="C类用户" value="C类用户" />
        </el-select>
      </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="data.form1.userName" autocomplete="off" />
     </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="data.form1.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
        </el-radio-group>
         </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
        <el-input v-model="data.form1.birthday" autocomplete="off"  />
         </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="data.form1.email" autocomplete="off" />
         </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input v-model="data.form1.phone" autocomplete="off"  />
         </el-form-item>
        <el-form-item label="收货地址" :label-width="formLabelWidth">
        <el-input v-model="data.form1.address" autocomplete="off" />
         </el-form-item>
        <el-form-item label="可用积分" :label-width="formLabelWidth">
        <el-input v-model="data.form1.jiFen" autocomplete="off" disabled />   
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 积分充值 -->
<el-dialog v-model="data.dialogFormVisible1" title="积分充值">
    <el-form :model="data.form2">
        <el-form-item label="充值积分" :label-width="formLabelWidth">
        <el-input v-model="data.form2.jiFen" autocomplete="off" />   
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="AddIntegral">充值</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted,computed} from 'vue';
import {reactive,ref} from 'vue'
import http from '../utils/request'
import { ElMessage } from "element-plus";
   onMounted(()=>{
     getAllMember();
    //  getFirst()
   })
   const data = reactive(
    {
    state:'0',
    flag:false,
    jifen1:0,
    count:'',
    form:{value:''},
    form1:{    
    userName: '',
    id:'',
    fenZu: '',
    sex: '0',
    address: '',
    phone: '',
    email:'',
    jiFen:'',
    birthday:''
    },
    form2:{userName:'',jiFen:''},
    nowpage: 1,
    pageNum: 1,
    dialogFormVisible:false,
    dialogFormVisible1:false,
    tableData: []
    }
   )
const formLabelWidth = '140px'
// 翻页，跳转至第几页
const page = (num) => { 
    data.nowpage = parseInt(num) 
    data.pageNum = parseInt(num) 
    }
//分页显示多少数据
let nowData = computed(() => {
    let startPage = (data.nowpage - 1) * 3;
    return data.tableData.slice(startPage, startPage + 3)
})
// 最大页码
const maxpage = computed(() => {
    return Math.ceil(data.tableData.length / 3);
})

// 启用状态
const actionUpdate=(row)=>{
  if(row.state==0){
    data.state = '1'
  }
  if(row.state==1){
    data.state = '0'
  }
  // 发起请求修改状态
    http({
    url:'/xgState',
    method:'post',
    data:{
      state:data.state,
      id:row.id
    }
     }).then((res)=>{
  // console.log(res,'启用状态请求数据');
  ElMessage({
              message: '会员状态修改成功',
              type: 'success',
            })
  getAllMember()
     })
}

// 获取所有会员信息
const getAllMember=()=>{
  http({
    url:'/Allmember',
    method:'get'
     }).then((res)=>{
  // console.log(res.data.data,'获取所有会员信息请求数据');
  data.tableData = res.data.data
     })
}
// 编辑会员信息
const update=(row)=>{ 
    // console.log(row,'编辑会员信息当前行数据');
    data.dialogFormVisible = true
   data.form1 = row
}
  const dateFormat=(row, column, cellValue, index)=>{
      const daterc = row[column.property]
      if (daterc != null) {
        var date = new Date(daterc);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始，11结束，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      }
    }

// 积分充值
const AddJifen=(row)=>{
  data.form2.userName = row.userName
  data.dialogFormVisible1 = true
}
// 点击充值按钮发起请求充值
const AddIntegral=()=>{
  // console.log(data.form2.jiFen,data.jifen1);
  // 可用积分与充值积分相加得到总积分传到后端修改积分
  // data.count = (data.form2.jiFen - 0) + (data.jifen1 - 0)
  // console.log(data.count);
    http({
    url:'/Addjf',
    method:'post',
    data:{
      jiFen:data.form2.jiFen,
      userName:data.form2.userName,
    }
     }).then((res)=>{
      //  console.log(res.data.code)
       if(res.data.code == 200){
          ElMessage({
              message: '积分充值成功',
              type: 'success',
            })
        data.form2.jiFen = ''
        data.dialogFormVisible1 = false
        getAllMember();
       }
     })
}
// 点击保存按钮，发起修改会员信息请求
const save = ()=>{
  console.log(data.form1)
   http({
    url:'/modifMember',
    method:'post',
    data:{
      id:data.form1.id,
      userName:data.form1.userName, 
      phone:data.form1.phone, 
      sex:data.form1.sex,
      email:data.form1.email, 
      address:data.form1.address,
      birthday:data.form1.birthday,
      fenZu:data.form1.fenZu
    }
     }).then((res)=>{
    // console.log(res,'修改信息请求数据');
    if(res.data.code == 200){
       ElMessage({
              message: '会员信息修改成功',
              type: 'success',
            })
      data.dialogFormVisible = false
      getAllMember();
    }
     })
}
const select = ()=>{
    console.log(data.form.value);
    if(data.form.value){
         data.tableData = data.tableData.filter((item)=>{
           return item.userName.includes(data.form.value)||item.phone.includes(data.form.value)
          })
    }else{
      getAllMember()
    }
    data.form.value=''
}

</script>

<style scoped>
.cont1{
  background-color: #f2f2f2;
  line-height: 3rem;
  height: 3rem;
  font-size: 12px;
  width: 100%;

  padding:0rem 1rem;
  box-sizing:border-box;
}
	
.content{
    height: 100%;
    background-color: white;
    padding:1rem 1rem;
    box-sizing: border-box;
}
.select{
        padding: 1.5rem 1rem;
    }
.page{
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    
}
.pageSpan{
    color: rgb(125, 125, 248);
    font-size: 14px;
}
span{ 
    color: red;
}
.pageInput {
    outline: none;
    margin: 0.1rem;
    width: 2rem;
    height: 0.7rem;
    padding: 0.5rem;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
        }
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}

</style>